<template>
  <div>
    <p v-if="id" :class="$style.link">本文链接: http://ymd.dzfinvest.com/#/article/{{id}}</p>
    <div :class="$style.editorContainer">
      <quill-editor
        ref="myTextEditor"
        v-model="form.content"
        :options="editorOption"
        @ready="onEditorReady($event)"
      >
      </quill-editor>
      <el-form ref="form" :model="form" :class="$style.form" label-width="40px">
        <el-form-item label="标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="封面">
          <img-upload :previewStyle="{width:'200px'}" v-model="form.picture"></img-upload>
        </el-form-item>
        <hr>
        <el-button type="primary" class="long-btn" @click="onSubmit">保 存</el-button>
      </el-form>
    </div>
    <div :class="$style.previeWrapper">
      <div class="ql-snow" :class="$style.preview">
        <div class="html ql-editor" v-html="form.content"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { ImgUpload } from 'components'
import * as apis from 'services/graphicMsg'

export default {
  name: 'GraphicMsgEdit',
  components: {
    ImgUpload,
  },
  computed: {
    editor() {
      return this.$refs.myTextEditor.quillEditor
    },
  },
  data() {
    return {
      name: 'base-editor',
      editorOption: {},
      id: '',
      form: {
        title: '',
        picture: '',
        content: '',
      },
    }
  },
  created() {
    this.id = this.$route.query.id
    if (this.id) {
      apis.getArticleById(this.id)
        .then((info) => {
          this.form = {
            id: info.id,
            title: info.title,
            picture: info.picture,
            content: info.content,
          }
        })
    }
  },
  methods: {
    onEditorReady(editor) {
      console.log('editor ready!', editor)
    },
    onSubmit() {
      apis.saveArticle(this.form)
      .then(() => {
        this.$message({
          message: '保存成功',
          type: 'success',
        })
        this.$router.push('/graphicMsg')
      })
    },
  },
}
</script>
<style module lang="scss">
.editorContainer {
  margin-right: 420px;
}

.form {
  max-width: 500px;
  margin: 24px 0;
}

.previeWrapper {
  position: fixed;
  right: 24px;
  top: 12px;
  width: 400px;
  height: 725.55px;
  background-image: url("assets/Material/iphone_preview.png");
  background-size: 100% 100%;
}

.preview {
  position: absolute;
  background-color: #fff;
  width: 258px;
  height: 458px;
  top: 128px;
  left: 68px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  &::-webkit-scrollbar {
    display: none;
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
  }
}

.link {
  font-size: 16px;
}
</style>
